* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

ul, li {
  list-style: none;
}

html {
  font-size: 140px;
}

body {
  overflow: hidden;
  font-size: 16px;
  font-family: "黑体";
}

@font-face {
  font-family: 'iconfont';  /* project id："174442" */
  src: url('//at.alicdn.com/t/font_iamwnvsg2vbr19k9.eot');
  src: url('//at.alicdn.com/t/font_iamwnvsg2vbr19k9.eot') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_iamwnvsg2vbr19k9.woff') format('woff'),
  url('//at.alicdn.com/t/font_iamwnvsg2vbr19k9.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_iamwnvsg2vbr19k9.svg#iconfont') format('svg');
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale;
}

@media screen and (min-width: 120px) {
  html {
    font-size: 16px;
  }
}

@media screen and (min-width: 360px) {
  html {
    font-size: 48px;
  }
}

@media screen and (min-width: 375px) {
  html {
    font-size: 50px;
  }
}

@media screen and (min-width: 412px) {
  html {
    font-size: 54.93333px;
  }
}

@media screen and (min-width: 414px) {
  html {
    font-size: 55.2px;
  }
}

.beijing{
  position: relative;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: url(../img/bg.jpg) no-repeat;
  background-size: cover;
}
#big-box{
	position: relative;
	width: 100%;	
	height: 7.1rem;
	z-index: 8934;
}
.ct-box{
	position: absolute;
	width: 100%;	
	height: 7.1rem;
	left: 0;
	top: 0;
	opacity: 0;
	overflow: hidden;
	transition: all 0.3s linear;
}
.left-box{
	position: absolute;
	left: -100%;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 100;
	opacity: 0;
	transition: all 0.3s linear;
}
.rightb-box{
	position: absolute;
	left: 100%;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 100445;
	margin-top: 0.1rem;
	overflow: hidden;
	opacity: 0;
	transition: all 0.3s linear;
}
.chuxian{
	left: 0;
	opacity: 1;
}
.luse{
	color: #CE3D3E;
}
.rightb-box li{
	padding: 0 0.3rem;
	text-align: center;
	font-size: 20px;
	height: 0.7rem;
	line-height: 0.7rem;
	color: #bcbcbc;
}
.xiangxi{
	border-top: 1px solid #5a4d41;
}
.xiangxi li{
	padding: 0 0.3rem;
	overflow: hidden;
}
.right-box{
	float: left;
	height: 1.2rem;
	border-bottom: 1px solid #5a4d41;
	width: 80%;
}
.xiangxi li span{
	color: #fff;
	font-size: 18px;
	height: 1.2rem;
	line-height: 1.2rem;
	float: left;
}
.xiangxi li .jiantou{
	float: right;
	font-size: 28px;
	color: #97938f;
}
.xiangxi li .geshou.iconfont {
	margin-top: 0.1rem;
	margin-right: 0.45rem;
	margin-left: 0.2rem;
	font-size: 32px;
}
.geshou img{
	width: 1rem;
	margin-top: 0.1rem;
	margin-right: 0.3rem;
}
#zhezhao {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: 0.4;
}

#top {
  width: 100%;
  height: 1.1rem;
  /*background: #000;*/
  padding: 0 20px;
  box-sizing: border-box;
  position: relative;
  z-index: 8778999;
}
.lf{
	float: left;
	color: #c2c2c2;
	font-size: 26px;
	line-height: 1.1rem;
}
.rg{
	position: relative;
	float: right;
	color: #c2c2c2;
	font-size: 26px;
	line-height: 1.1rem;
}
.weituo{
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
}
.vivo{
	/*display: none;*/
	position: fixed;
	left: 0;
	bottom: -85%;
	width: 100%;
	height: 65%;
	background: #ececec;
	transition: all 0.3s ease-in-out;
	z-index: 100;
}
.hei-tou{
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: #000;
	opacity: 0.4;
	display: none;
	transition: all 0.4s ease-in-out 0.3s	;
}
.active{
	bottom: 0;
}
.toum{
	display: block;
}
.xtishi{
	width: 100%;
	overflow: hidden;
	margin-top: 0.2rem;
	padding-left: 0.3rem;
	border-bottom: 1px solid #b6b6b6;
	padding-bottom: 0.15rem;
}
.xtishi span{
	display: block;
	font-size: 16px;
	line-height: 0.7rem;
	color: #fff;
}
.caidan{
	padding:0.2rem;
	border-bottom: 1px solid #b6b6b6;
	overflow: hidden;
}
.caidan-lis{
	box-sizing: border-box;
	width: 25%;
	padding: 0.2rem;
	/*border: 1px solid red;*/
	float: left;
	height: 2.6rem;
	text-align: center;
}
.caidan-lis img{
	width: 100%;
	display: block;
	line-height: 0;
	
}
.caidan-lis span{
	line-height:0;
	color: #000;
	font-size: 16px;
}
.void{
	width: 100%;
	overflow: hidden;
	padding: 0.4rem 0.4rem;
	border-bottom: 1px solid #b6b6b6;
}
.laba{
	float: left;
	width: 0.25rem;
}
.volume{
	position: relative;
	float: left;
	/*background: red;*/
	margin: 0 0.6rem;
	height: 0.4rem;
	width: 4.6rem;
}
.hengping{
	float: right;
	width: 0.64rem;
}
.ylt{
	position: relative;
	width: 100%;
	height: 0.05rem;
	background: #c5c5c5;
	position: absolute;
	left: 0;0.05rem;
	top: 0.18rem;
}
.hei{
	position: absolute;
	left: 0;
	top: 0;
	height: 0.05rem;
	width: 100%;
	background: #161616;
}
.y-yuan{
	background: #fff;
	width: 0.4rem;
	height: 0.4rem;
	border: 1px solid #c5c5c5;
	position: absolute;
	right: -0.2rem;
	top: -0.17rem;
	border-radius: 50%;
}
.quxiao{
	width: 100%;
	overflow: hidden;
	text-align: center;
	line-height: 1rem;
	color: 20px;
	color: #000;
}
.title{
	line-height: 1.1rem;
	font-size: 18px;
	color: #e0dede;
	float: left;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	text-align: center;
}
.author{
	position: relative;
	z-index: 50;
	width: 100%;
	height: 0.6rem;
	/*background: #000;*/
	color: #e0dede;
	font-size: 20px;
	text-align: center;
	line-height: 0.6rem;
}
.xuan{
	position: relative;
	z-index: 56;
	width: 100%;
	height: 0.6rem;
	margin-top: 0.2rem;
}
.xuan-lis{
	width: 54%;
	height: 100%;
	margin: 0 auto;
}
.lis{
	color: #CE3D3E;
	text-align: center;
	line-height:100%;
	float: left;
	font-size: 19px;
	font-family: "微软雅黑";
	border: 1px solid #CE3D3E;
	padding: 0.05rem 0.15rem;
	padding-bottom: 0.08rem;
	margin-left: 0.35rem;
	border-radius: 0.08rem;
}
.lis-first{
	margin-left: 0;
}
.zhuan{
	width: 100%;
	height: auto;
	position: relative;
	z-index: 55;
}
.img{
	width: 62%;
	display: block;
	margin: 0 auto;
	margin-top: 0.3rem;	
}
.zhuandong{
	animation: xz 9s linear infinite;
}
@keyframes xz{
	0%{
		transform: rotate(0deg);
	}
	100%{
		transform: rotate(360deg);
	}
}
.word{
	margin-top: 0.2rem;
	width: 100%;
	height: 0.6rem;
	/*background: #000;*/
	position: relative;
	z-index: 100;
}
.ct{
	padding: 0 20px;
	text-align: center;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	color: #e9e9e9;
	font-size: 19px;
	line-height: 0.6rem;
	height: 0.6rem;
		overflow: hidden;
}
.ct span{
	color: #CE3D3E;
	display:block ;

}
.anniu{
	position: relative;
	z-index: 1000;
	width: 100%;
	height: 0.6rem;
	/*background: #000;*/
}
.anniu-ct{
	width: 25%;
	height: 100%;
	margin: 0 auto;
	/*background: red;*/
}
.anniu-ct div{
	width: 0.5rem;
	height: 0.5rem;
	float: left;
	/*background: red;*/
	margin-right: 0.1rem;
	text-align: center;
	position: relative;
}
.anniu-ct span{
	float: left;
	width: 0.16rem;
	height: 0.16rem;
	background: #9a9a99;
	border-radius: 50%;
	line-height: 1rem;
	margin-top: 0.3rem;
	margin-left: 0.2rem;
}
.anniu-ct .first-span{
	margin-left: 0;	
}
.anniu-ct .action{
	background: #fff;
}
.all-radio{
	position: relative;
	z-index: 1000;
	width: 100%;
	height: 0.6rem;
	padding: 0 0.3rem;
	margin-top: 0.3rem;
}
.all-radio div{
	float: left;
	color: #a9a7a6;
	line-height: 0.6rem;
	text-align: center;
}
.current-time,.duration{
	width: 1rem;
	height: 100%;
}
.all-radio .duration{
	float: right;
}
.all-radio .pragress{

	margin: 0 0.2rem;
	height: 100%;
	/*background: red;*/
	width: 4.5rem;
}
.jdt{
	position: relative;
	width: 100%;
	height: 0.04rem;
	background:#a9a7a6 ;
	margin-top: 0.3rem;
}
.green{
	position: absolute;
	width: 0;
	left: 0;
	top: 0;
	height: 100%;
	background:#CE3D3E ;
	z-index: 39945;
}
.yuan{
	width: 0.3rem;
	height: 0.3rem;
	background: #CE3D3E;
	border-radius: 50%;
	position: absolute;
	left:-0.15rem ;
	top: -0.15rem;
}
.bofang{
	margin-top: 0.5rem;
	position: relative;
	z-index: 599;
	width: 100%;
	height: 1.5rem;
}
.bofang-ct .shang{
	color: #CE3D3E;
	font-size: 40px;
	float: left;
	/*margin-top: 0.18rem;*/
	line-height: .2rem;
	text-align: center;
}
.bofang .bofang-ct{
	position: absolute;
	left: 0;
	right: 0;
	width: 65%;
	height: 100%;
	margin: 0 auto;
	font-size: 50px;
}
.bofang-ct .xia{
	float: right;
	font-size: 40px;
	color: #CE3D3E;
	/*margin-top: 0.18rem;*/
	line-height: .3rem;
	text-align: center;
}
.bofang-ct .play{
	float: left;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
	margin: auto;
	width: 1.36rem;
	font-size: 44px;
	overflow: hidden;
	color: #CE3D3E;
	text-align: center;
	line-height: .2rem;
}
.bottom{
	position: relative;
	z-index: 200;
	width: 100%;
	height: 1rem;
	margin-top: 0.3rem;
	padding: 0 0.3rem;
}
.bottom .iconfont{
	float: left;
	color: #bfbfbf;
	font-size: 30px;
	width: 1.38rem;
	text-align: center;
	height: 100%;
	line-height: 1rem;
	text-align: center;
	margin: 0 0.46rem;
}
.bottom .bt-lis2{
	font-size:35px ;
}
#audio{
	position: fixed;
	left: 0.8rem;
	top: 8rem;
	z-index: 2000;
	background: #fff;
	display: none;
}
.gequ-lis{
	position: relative;
	position:fixed;
	left: 0;
	bottom: -70%;
	background: #191f28;
	width: 100%;
	height: 65%;
	z-index: 8999;
	transition: all 0.3s ease-in;
}
.show{
	bottom: 0;
}
.toubu{
	/*position: absolute;
	left: 0;
	top: 0;*/
	width: 100%;
	/*height: 1.2rem;*/
	border-bottom: 1px solid #61656b;
	padding:  0.2rem 0.25rem;
	box-sizing: border-box;
	overflow: hidden;
	
}
.tubiao{
	color: #f0f0f1;
	font-size: 32px;
	overflow: hidden;
	padding-bottom: 0.15rem;
}
.bof-lis div{
	float: left;
	color: #fff;
}
.word-lis{
	font-size: 20px;
	margin-left: 0.2rem;
	margin-top: 0.75rem;
}
.all-nub{
	float: left;
	color: #8c8f94;
	font-size: 18px;
	margin-top: 0.78rem;
}
.xuan-tub{
	float: right;
	overflow: hidden;
}
.xuan-tub div{
	float: left;
	font-size: 28px;
	color: #a4a6a9;
	margin-left: 0.35rem;
	margin-top: 0.1rem;
}
.close{
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 1rem;
	background: #171b23;
	z-index: 999999999999;
	opacity: 0.9;
	text-align: center;
	line-height: 1rem;
	font-size: 20px;
	color: #fff;
	
}

.many-ge{
	width: 100%;
	overflow: hidden;
}
.ge-lins{
	width: 100%;
	overflow: hidden;
	padding:0.2rem;
	padding-bottom: 0.18rem;
}
.name{
	float: left;
	color: #fff;
	font-size: 16px;
	margin-top: 0.05rem;
	overflow: hidden;
}
.name span{
	float: left;
}
.name .yinfu{
	color: #fff;
	font-size: 14px;
	margin-left: 0.2rem;
	display: none;
	margin-top: 0.05rem;
}
.name .ge-author{
	color: #9d9fa3;
	font-size: 15px;
}
.current .name span{
	color: #CE3D3E;
	font-weight: 500;
}
.current .name .yinfu{
	display: none;
}
.caozuo{
	float: right;
	overflow: hidden;
}
.caozuo span{
	float: left;
	font-size: 24px;
	color: #9d9fa3;
	margin-left: 0.3rem;
}
.caozuo .del{
	font-size: 21px;
}
.song-list{
	position: relative;
	position: fixed;
	left: 0;
	top: 110%;
	width: 100%;
	height: 100%;
	background: #f4f4f4;
	z-index: 99999999;
	overflow: hidden;
	transition: all 0.3s linear;
}
.yichu{
	top: 0;
}
.mulu{
	position: relative;
	width: 100%;
	height: 1.2rem;
	background: #CE3D3E;
	color: #fff;
	font-size: 21px;
	overflow: hidden;
	padding: 0 0.3rem;
}
.mulu .quanxuan{
	float: left;
	line-height: 1.2rem;
}
.mulu .guanbi{
	float: right;
	line-height: 1.2rem;
}
.mulu .all2{
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	height: 1.2rem;
	text-align: center;
	line-height: 1.2rem;
	width: 2.5rem;
	/*background: red;*/
}
.all-song{
	width: 100%;
	overflow: hidden;	
}
.song{
	width: 100%;
	height: 1.1rem;
	border-bottom: 1px solid #e0e0e0;
	background: #fff;
	padding: 0 0.3rem;
	line-height: 1.1rem;
}
.song span{
	float: left;
	margin-right: 0.2rem;
}
.quan{
	width: 0.45rem;
	height: 0.45rem;
	background: #fff;
	border: 1px solid #fffA43;
	border-radius: 50%;
	margin-top: 0.28rem;
	position: relative;
	box-sizing: border-box;
}
.font{
	position: absolute;
	left: -0.02rem;
	top: -0.31rem;
	font-size: 24px;
	color: #CE3D3E;
	display: none;		
}
.fontClass{
	display: block;
}
.add{
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height:2rem;
	background: #e9e8e8;
	text-align: center;
}
.add span{
	display: block;
	font-size: 15px;
}
.add .iconfont{
	font-size: 36px;
	color: #222e3b;
}
